<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
    text{
        fill:green;
        stroke:#006600;
        stroke-width: 1;
        font-size: 20px; 
        font-weight: bolder;
    }
</style>
<body>
    <!-- 圆形 -->
    <svg width="100" height="100" style="background-color:pink" id="txt">
        <circle cx="50" cy="50" r="20" style="stroke:#006600; fill:#00cc00" />
    </svg>

    <!-- 直线 -->
    <svg width="100" height="100" style="background-color:blue">
        <line x1="20" y1="50" x2="80" y2='50' style="stroke:#00cc00; fill:#00cc00" />
    </svg>

    <!-- 折线 -->
    <svg width="100" height="100" style="background-color:pink">
        <polyline points="20,20 30,85 45,15 60,35" style="stroke:#00cc00;fill:none" />
    </svg>

    <!-- 矩形 -->
    <svg width="100" height="100" style="background-color:blue">
        <rect x="20" y="35" width="60" height="30" style="stroke:#00cc00;fill:#00cc00" />
    </svg>

    <!-- 椭圆 -->
    <svg width="100" height="100" style="background-color:blue">
        <ellipse cx="50" cy="50" ry="20" rx="40" style="stroke:#00cc00;fill:#00cc00" ></ellipse>
    </svg>

    <!-- 多边形 -->
    <svg width="100" height="100" style="background-color:blue">
        <polygon points="50,33 25,66 75,66" style="stroke:#00cc00;fill:#00cc00" />
    </svg>

    <!-- 多边形 -->
    <svg width="100" height="100" style="background-color:blue">
        <polygon points="25,50 50,25 75,50 50,75" style="stroke:#00cc00;fill:#00cc00" />
    </svg>

     <!-- 绘制文本 -->
     <svg width="100" height="100" style="background-color:blue" >
        <text x="30" y="40">你好</text>
        <use href="#txt" x="5" y="20"></use>

    </svg>
   
</body>

</html>